<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Demo for multi-modes going out</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">

	      <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="bootstrap/media/theme.css" rel="stylesheet">

	<!-- Start on import lib -->

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,
        body,
        div {
            width: 100%;
            height: 50px;
        }
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
        }
    </style>

	<!-- End on importing -->



    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
  <audio id='a1' src="折点1.mp3"></audio>
  <audio id='a2' src="折点2.mp3"></audio>
  <audio id='a3' src="折点3.mp3"></audio>
  <audio id='a4' src="折点4.mp3"></audio>

  </head>


  <body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container" style="width: auto; height: auto;">
        <div class="navbar-header" style="width: auto; height: auto;">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">ComMusic</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse" style="width: auto; height: auto;">
          <ul class="nav navbar-nav">
            <li><a href="#page-header">Logo</a></li>
            <li><a href="#imageDiv">Show</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container theme-showcase" role="main" style="width: auto; height: auto;">

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron" style="height:auto;">
        <img src="Logo.png" style="display:block; margin:10px auto;">
      </div>

		<div class="page-header" style="height:auto;">
			<center><h1 style="display:block; margin:10px auto;">Demo</h1></center>
		</div>
		<div class="well" style="width: auto; height: auto;">
            <center><button onclick="main();" class="btn btn-lg btn-success">Show!</button></center>
			<div id="wrapper" style="width:auto; display:table;">
				<div id="imageDiv" style="width:700; display:table-cell;">
					<div id="container" style="width:100%; height:100%;"></div>
				</div>
				<div id="jsonOutput" style="width:auto; display:table-cell;">
					<textarea id="output-text" class="UIInput" style="width:0px;" rows="20"></textarea>
				</div>
			</div>
		</div>
    </div> <!-- /container -->

	<!-- functions -->

	<script type="text/javascript">
		var mapBaseUrl = "http://webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/";
     audio1=document.getElementById("a1");
     audio2=document.getElementById("a2");
     audio3=document.getElementById("a3");
     audio4=document.getElementById("a4");
		function main() {

            start();
		}
	</script>

	<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.1&key=44b10c4e6e01c3739927e3e6441785a3'></script>
    <!-- UI组件库 1.0 -->
    <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //创建地图
    function start(){

        var map = new AMap.Map('container', {
        resizeEnable: true,
		    center: [116.4,39.9],
        zoom: 4
    });
    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function(pathData, pathIndex) {

                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {

                if (pointIndex >= 0) {
                    //point
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }

                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {

                renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        //设置数据
        pathSimplifierIns.setData([{
            name: '路线0',
            path: [
                [116.415, 39.87],
                [116.4214, 39.87],
                [116.4207, 39.8848],
                [116.4191, 39.888],
                [116.4189, 39.8932],
                [116.4278, 39.8936],
                [116.4277, 39.8948],
                [116.431, 39.895],
                [116.4307, 39.89755],
                [116.43, 39.89755],
                [116.43, 39.90],
            ]
        }]);

        //对第一条线路（即索引 0）创建一个巡航器
        var navg = pathSimplifierIns.createPathNavigator(0, {
            loop: false, //循环播放
            speed: 300 //巡航速度，单位千米/小时
        });
        navg.on("move", function(){
                if (!navg.isCursorAtPathEnd()) {
                    var result = isRalm([navg.getPosition().getLng(),navg.getPosition().getLat()]);
                    console.log("result" + result);
                    if (result) {
                        switch (result) {
                            case 1:
                                var str = [];
                                str.push('<div style="color: #3366FF;">天气有点冷哦，给您放首摇滚热热身吧！' + '</div>');
                                // str.push('<div>城市/区：' + data.city + '</div>');
                                // str.push('<div>天气：' + data.weather + '</div>');
                                // str.push('<div>温度：' + data.temperature + '℃</div>');
                                // str.push('<div>风向：' + data.windDirection + '</div>');
                                // str.push('<div>风力：' + data.windPower + ' 级</div>');
                                // str.push('<div>空气湿度：' + data.humidity + '</div>');
                                // str.push('<div>发布时间：' + data.reportTime + '</div>');
                                var infoWin0 = new AMap.InfoWindow({
                                    content: str.join(''),
                                    offset: new AMap.Pixel(0, -70)
                                });
                                var marker0 = new AMap.Marker({map: map, position: new AMap.LngLat(116.4214, 39.87), animation:'AMAP_ANIMATION_DROP', visible: false});
                                // infoWin2.open(map, marker4.getPosition());
                                infoWin0.open(map, marker0.getPosition());
                                audio1.play();
                                break;
                            case 2:
                                var str = [];
                                str.push('<div style="color: #3366FF;">旁边有个公园感受下自然的气息吧！' + '</div>');
                                // str.push('<div>城市/区：' + data.city + '</div>');
                                // str.push('<div>天气：' + data.weather + '</div>');
                                // str.push('<div>温度：' + data.temperature + '℃</div>');
                                // str.push('<div>风向：' + data.windDirection + '</div>');
                                // str.push('<div>风力：' + data.windPower + ' 级</div>');
                                // str.push('<div>空气湿度：' + data.humidity + '</div>');
                                // str.push('<div>发布时间：' + data.reportTime + '</div>');
                                var infoWin1 = new AMap.InfoWindow({
                                    content: str.join(''),
                                    offset: new AMap.Pixel(0, -70)
                                });
                                var marker1 = new AMap.Marker({map: map, position: new AMap.LngLat(116.4207, 39.8848), animation:'AMAP_ANIMATION_DROP', visible: false});
                                // infoWin2.open(map, marker4.getPosition());
                                console.log("xxx")
                                infoWin1.open(map, marker1.getPosition());
                                audio2.play();
                                break;
                            case 4:
                                var str = [];
                                str.push('<div style="color: #3366FF;">这是条古老的街道，来首慢摇~' + '</div>');
                                // str.push('<div>城市/区：' + data.city + '</div>');
                                // str.push('<div>天气：' + data.weather + '</div>');
                                // str.push('<div>温度：' + data.temperature + '℃</div>');
                                // str.push('<div>风向：' + data.windDirection + '</div>');
                                // str.push('<div>风力：' + data.windPower + ' 级</div>');
                                // str.push('<div>空气湿度：' + data.humidity + '</div>');
                                // str.push('<div>发布时间：' + data.reportTime + '</div>');
                                var infoWin2 = new AMap.InfoWindow({
                                    content: str.join(''),
                                    offset: new AMap.Pixel(0, -70)
                                });
                                var marker2 = new AMap.Marker({map: map, position: new AMap.LngLat(116.4189, 39.8932), animation:'AMAP_ANIMATION_DROP', visible: false});
                                // infoWin2.open(map, marker4.getPosition());
                                console.log("xxx")
                                infoWin2.open(map, marker2.getPosition());
                                audio3.play();
                                break;
                            case 5:
                                var str = [];
                                str.push('<div style="color: #3366FF;">您快到了，have a nice day~' + '</div>');
                                // str.push('<div>城市/区：' + data.city + '</div>');
                                // str.push('<div>天气：' + data.weather + '</div>');
                                // str.push('<div>温度：' + data.temperature + '℃</div>');
                                // str.push('<div>风向：' + data.windDirection + '</div>');
                                // str.push('<div>风力：' + data.windPower + ' 级</div>');
                                // str.push('<div>空气湿度：' + data.humidity + '</div>');
                                // str.push('<div>发布时间：' + data.reportTime + '</div>');
                                var infoWin4 = new AMap.InfoWindow({
                                    content: str.join(''),
                                    offset: new AMap.Pixel(0, -70)
                                });
                                var marker4 = new AMap.Marker({map: map, position: new AMap.LngLat(116.4278, 39.8936), animation:'AMAP_ANIMATION_DROP', visible: false});
                                // infoWin2.open(map, marker4.getPosition());
                                console.log("xxx")
                                infoWin4.open(map, marker4.getPosition());
                                audio3.pause();
                                audio4.play();
                                break;
                        }
                    }
                }
            });
        navg.start();
    });

    function isRalm(position) {
            var path = [
                    [116.415, 39.87],
                    [116.4214, 39.87],
                    [116.4207, 39.8848],
                    [116.4191, 39.888],
                    [116.4189, 39.8932],
                    [116.4278, 39.8936],
                    [116.4277, 39.8948],
                    [116.431, 39.895],
                    [116.4307, 39.89755],
                    [116.43, 39.89755],
                    [116.43, 39.90],
                ]
            for (i = 0; i < 11; i++) {
                console.log(path[i][0]);
                var calculate = Math.pow((position[0] - path[i][0]),2) + Math.pow((position[1] - path[i][1]),2);
                console.log(calculate);
                if (calculate < 0.0000008) {
                    return i;
                }
            }
            return false;
        }


    }
    </script>

	<!-- End all scripts -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>
